<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :leftType="'1'" :title="$t('finishedInventory.detailsView')" :rightText="$t('distributedEnter.scanRecord')"
				@clickRight="clickRight" @clickLeftBack="clickLeftBack"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
            <view class="distributed">
				<view  class="custom-form-card">
				<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
					<text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text>
					<comboGrid requestUrl="/mes/basMaterial/getPageSetPDA?text=成品" v-model="data.materialCode" :calculate="false" :requestParam="data.materialParam" inputKey="materialName" :placeholder="$t('distributedEnter.placeholderTextChoose')" gridPlaceholder="输入代码或者名称筛选" :column="data.columnName.column" bindValue="materialCode" @setClick="getMaterialClick"></comboGrid>
					<uni-icons class="iconDelete" type="close" v-if="data.materialCode" size="18" color="#999" @click="handelMaterialClear"></uni-icons>
				</view>
				<view  class="custom-card-itemTwo" style="padding: 20rpx 0;">
					<text class="item-info-title" style="width:180rpx">{{$t('distributedOut.location')}}：</text>
					<storageBin :ignoreLocationCode="data.ignoreLocationCode" class="gui-text-right"
						requestUrl="/wms/wmsLocation/getIsUsePageSetByFG"
						:requestParam="data.requestParam" :locationUseList="data.locationUseList"
						v-model="data.locationCode"
						@setClick="getLocationClick" style="width:100%"></storageBin>
						<uni-icons class="iconDelete" type="close" v-if="data.locationCode.length" size="18" color="#999" @click="handelClear"></uni-icons>
					<!-- <comboGrid requestUrl="/wms/wmsLocation/getIsUsePageSetByFG" v-model="data.locationCode" :requestParam="data.requestParam" inputKey="locationCode" :placeholder="$t('distributedEnter.placeholderTextChoose')" gridPlaceholder="输入名称筛选" :column="data.columnLocation.column" bindValue="locationName" @setClick="getLocationClick"></comboGrid> -->
				</view>
				</view>
				
				
                <scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
                    <view class="record-card" v-for="(item,index) in data.list" :key="`${item.materialCode}` + `${index}`">
                       <view class="custom-card-itemOne">
                           <text class="item-info-title">{{$t('distributedEnter.barcode')}}：</text> {{ item.barcode }}
                       </view>
						<view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text> {{ item.materialCode }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.materialName')}}：</text>{{ item.materialName }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedOut.location')}}：</text>
                            {{ item.locationCode }}
						</view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{ item.stockQty }}
                        </view>
                       <!-- <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('JsInternational.ofStocktaked')}}：</text>{{ item.checkQty }}
                        </view> -->
                    </view>
                    <view v-if="data.noticeHooks" class="noticeHooks">
                        {{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
                    </view>
                </scroll-view>
            </view>
		</template>
	</gui-page>
</template>

<script setup>
    import {selectWmsCheckStocked} from '@/api/api.js'
	import {reactive,onMounted} from 'vue';
    import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_LOOK } from '@/constant/index.js'
	import storageBin from '@/components/storageBin.vue';
	import comboGrid from "@/components/comboGrid";
	import { navigate, navigateBack } from '@/utils/routerSkip.js';
	//注册组件
	components:{storageBin,comboGrid}
	
	//国际化引入
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
    // 接受来自父组件的传参 页面传值
	const props = defineProps({
		id: String,
	});
	onMounted(()=>{
		requestData()
	})

    let fromData = reactive({
		page:1,
		rows:10,
	});

	let data = reactive({
		list:[],
        id:props.id,
        noticeHooks: false, //暂无相关数据标识
		locationCode:'',//库位
		locationId:'',
		locationName:'',
		ignoreLocationCode: [],
		//物料代码的传参
			materialParam: {
				text:'成品',
				materialCode:"",
		 		materialName: "",//物料代码,传给接口用的变量
		 },
		 	materialCode:'',//物料编码
			materialId:'',
		// 库位的传参
		requestParam:{
				locationCode:""
		},
		//物料代码的下拉选择器
			columnName:{
				column: [{
					label: t('distributedEnter.materialCode'),
		   		name: "materialCode",
			 	},{
		 		label: t('distributedEnter.materialName'),
		   		name: "materialName",
		   }]
		 },
			// 库位的下拉选择器
			columnLocation:{
				column: [{
					label: t('JsInternational.volumnStockName'),
					name: "locationCode",
				},{
					label: t('JsInternational.volumnStockOf'),
					name: "maxCapacity",
				}]
		},
	})
	
	// 物料代码的选择
	const getMaterialClick=(x)=>{
		data.materialId=x.id
		data.materialCode=x.materialCode;
		requestData()
		
	}
	
	//库位选择之后赋值给变量
	const getLocationClick=(x) => {
		data.locationId=x.id
		data.locationName = x.locationName;
		data.locationCode = x.locationCode;
		requestData()
	
	}


  //导航栏左侧返回
  const clickLeftBack = () => {
  	uni.navigateBack({
  		delta: 1
  	});
  }
  
  
  //扫描纪录
  const clickRight = () => {
  	navigate({
  		url: '/pages/finishedInventory/finishedInventoryScanRecord'
  	})
  }
    //上拉加载
	const scrolltolower = () => {
		if(!data.noticeHooks){
			fromData.page ++
			requestData()
		}
	}
	// 调用接口渲染页面
    const requestData = ()=>{
        let parmes = {
            page:fromData.page,
		    rows:fromData.rows,
			masterId: data.id,// 盘点单id
			materialCode:data.materialCode,
			locationCode:data.locationCode
		}
        selectWmsCheckStocked(parmes).then(res => {
            try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '成品盘点'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_LOOK
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			if (res.status == 200) {
                data.noticeHooks = false
				// 根据接口返回设计上拉加载相应判断
				if(fromData.page === 1){
					if (res.data.rows.length == 0) {
						data.noticeHooks = true
					}
					data.list = res.data.rows
				}else{
					data.list = [...data.list, ...res.data.rows]
				}	
				data.noticeHooks = 	data.list.length >= res.data.total	
			} else {
				uni.showToast({ title: res.message, icon: "none" });
			}
		})
    }
const handelClear=()=>{
	data.locationCode=""
	data.locationName=""
	data.locationId=null
	requestData()

}

const handelMaterialClear=()=>{
	data.materialId=null
	data.materialCode="";
	requestData()
	
}
</script>


<style lang="scss" scoped>
    .scroll{
     flex: 1;
     height: 2rpx;
    }
    .noticeHooks{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        font-size: 32rpx;
        color: #999;
    }
    .distributed {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 88rpx);
		// height: 100vh;
        position: relative;
	}


</style>
